<script type="text/javascript">
	$(document).ready(function () {
		var url = "<?php echo base_url(); ?>index.php/team/getallteam";
        // prepare the data
        var source =
        {
            datatype: "json",
            datafields: [
				{ name: 'team_logo' },
                { name: 'team_name' },
                { name: 'team_country' },
                { name: 'team_type' },
                { name: 'enabled' },
                { name: 'create_date', type: 'datetime' },
                { name: 'create_by' },
                { name: 'modify_date', type: 'datetime' },
                { name: 'modify_by' },
            ],
            id: 'teamid',
            url: url,
            root: 'data',
            updaterow: function (rowid, rowdata, commit) {
                // synchronize with the server - send update command
                // call commit with parameter true if the synchronization with the server is successful 
                // and with parameter false if the synchronization failed.
                commit(true);
            },
            deleterow: function (rowid, commit) {
                // synchronize with the server - send delete command
                // call commit with parameter true if the synchronization with the server is successful 
                // and with parameter false if the synchronization failed.
                commit(true);
            }
        };
        var dataAdapter = new $.jqx.dataAdapter(source);      

        var imagerenderer = function (row, datafield, value) {
			var result = '<img style="margin-left: 5px;" height="60" width="60" src="<?php echo base_url(); ?>' + value + '"/>';
            if(value == ""){
				result = "";
            }

            return 	result; 
        }
        
        $("#mainGrid").jqxGrid(
        {
            width: 1100,
            height: 540,
            source: dataAdapter,
            columnsresize: true,
            pageable: true,
            //autoheight: true,
            sortable: true,
            altrows: true,
            showtoolbar: true,
            groupable: true,
            groupsexpandedbydefault: true,
            showgroupsheader: false,
            rowsheight: 60,
            columns: [
              { text: '', dataField: 'team_logo', width: 60, cellsrenderer: imagerenderer},
              { text: 'Name', dataField: 'team_name',width: 200 },
              { text: 'Country', dataField: 'team_country',width: 200 },
              { text: 'Type', dataField: 'team_type'},
              { text: 'Enabled', dataField: 'enabled', columntype: 'checkbox' },
              { text: 'Create Date', dataField: 'create_date' },
              { text: 'Create By', dataField: 'create_by'},
              { text: 'Modify Date', dataField: 'modify_date'},
              { text: 'Modify By', dataField: 'modify_by'}
			],
			groups: ['team_type'],
			rendertoolbar: function (toolbar) {
                var me = this;
                var container = $("<div style='margin: 5px;'></div>");
                var input = $("<input id='addButton' value='Add' type='button' style='height: 23px; float: right; width: 223px;' />");
                var refresh = $("<input id='refreshButton' value='Refresh' type='button' style='height: 23px; float: right; width: 223px;' />");
                toolbar.append(container);
                container.append(input);
                //container.append(refresh);
                
                //Add data 
                input.on('click', function (event) {
                    window.location = "<?php echo base_url(); ?>index.php/team/createTeam";
                });

                refresh.on('click', function (event) {
                	$('#mainGrid').jqxGrid('refreshdata');
                });
                
    		}
        });

        
		var contextMenu = $("#Menu").jqxMenu({ width: 200, height: 58, autoOpenPopup: false, mode: 'popup'});

		$("#mainGrid").on('contextmenu', function () {
            return false;
        });

		 $("#mainGrid").on('rowclick', function (event) {
             if (event.args.rightclick) {
                 $("#mainGrid").jqxGrid('selectrow', event.args.rowindex);
                 var scrollTop = $(window).scrollTop();
                 var scrollLeft = $(window).scrollLeft();
                 contextMenu.jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
                 return false;
             }
         });

		 	// handle context menu clicks.
         	$("#Menu").on('itemclick', function (event) {
             var args = event.args;
             var rowindex = $("#mainGrid").jqxGrid('getselectedrowindex');
             if ($.trim($(args).text()) == "Edit") {
                 editrow = rowindex;
                 // get the clicked row's data and initialize the input fields.
                 var rowid = $("#mainGrid").jqxGrid('getrowid', rowindex);
                 window.location = "<?php echo base_url(); ?>index.php/team/editTeam?teamid=" + rowid;
                
             }
             else {
                 if(confirm("Do you want to delete?")){
                 	var rowid = $("#mainGrid").jqxGrid('getrowid', rowindex);
                 	url = "<?php echo base_url(); ?>index.php/team/doDelete";
					
                 	var request = $.ajax({
        				url: url,
        				type: "POST",			
        			    async: false,
        		        dataType: "html",
        		        data: {teamid: rowid}
        			});

        			request.done(function(msg) {				        			
        				alert("Data Deleted");	
        				$("#mainGrid").jqxGrid('deleterow', rowid);	
        			});

        			request.fail(function(jqXHR, textStatus) {
        				alert( "Request failed: " + textStatus );
        			});
                 	
                 }
             }
        	 }); 

		});
	</script>

<div style="font-size: 13px; font-family: Verdana; float: left;">
	<div id="mainGrid"></div>
</div>

<div id='Menu'>
	<ul>
		<li>Edit</li>
		<li>Delete</li>
	</ul>
</div>

